/*
 * @Author: yangrongxin
 * @Date: 2021-12-21 14:06:20
 * @LastEditors: guoju
 * @LastEditTime: 2022-01-10 14:32:10
 */

import { useEffect, useState } from 'react';
import { View, Text, Input } from '@tarojs/components';
import type { SingleChoise } from '@/types/exam';
import { EXTEND_TYPE } from '@/types/exam.d';
import { optionLabel, optionChildLabel } from '@/restful/utils';
import type { ComProps } from '../index.d';
import styles from './index.module.less';

interface ISingleSelect extends ComProps {
  extend: SingleChoise
}

const SingleSelect = (props: ISingleSelect) => {
  const {
    extend = [], 
    answer = [], 
    payload = [],
    text = '',
    setAnswer
  } = props;

  const [childCheckbox, setChildCheckbox] = useState<any>([]);

  useEffect(() => {
    setChildCheckbox(payload);
  }, [answer]);

  const onChangeSelect = (items: any, index: number) => {
    if (items.answerId === answer[0]) return;

    const _answer = Array(items.answerId);
    const _label = Array(optionLabel[index]);

    setAnswer(
      {
        answer: _answer,
        label: _label,
        payload: [],
        optionType: items.optionType,
      },
      items.jumpQuestionId || '',
    );
  };

  const onInputChange = (e: any) => {
    const { value } = e.target;
    setAnswer({
      text: value,
    }, '');
  };

  // 子选项多选项
  const onChildChange = (id: any) => {
    let list = JSON.parse(JSON.stringify(childCheckbox));

    const i = list.indexOf(id);

    if (i > -1) {
      list.splice(i, 1);
    } else {
      list.push(id);
    }
    setChildCheckbox(list);

    setAnswer({
      payload: list,
    }, '');
  };

  return <View className={styles.singleSelectContainer}>
    {extend.map((items: any, index: number) => {
      const { content, answerId, optionType, children } = items;
      const isSelect = answer.includes(answerId as never);
      
      return (
        <View
          key={answerId}
          className={`${styles.selectItem} ${isSelect ? styles.actived : ''}`}
          onClick={() => onChangeSelect(items, index)}
        >
          <View className={styles.answerName}>
            <Text>{optionLabel[index]}. {content}</Text>
          </View>
          
          {optionType === EXTEND_TYPE.INPUT && (
            <View className={styles.answerChild}>
              <Input
                className={styles.answerInput}
                placeholder="请输入"
                value={text}
                disabled={!isSelect}
                onInput={(e) => onInputChange(e)}
              />
            </View>
          )}

          {optionType === EXTEND_TYPE.CHILD && (
            <View className={styles.childCheckbox}>
              {children.map((item: any, index: number) => {
                const isSelect = childCheckbox.includes(item.id as never);
                return (
                  <View
                    key={item.id}
                    className={`${styles.answerCheckbox} ${isSelect ? styles.checked : ''}`}
                    onClick={() => onChildChange(item.id)}
                  >
                    {`${optionChildLabel[index]}. ${item.content}`}
                  </View>
                );
              })}
            </View>
          )}
        </View>
      )}
    )}
  </View>;
};

export default SingleSelect;
